<template>
    <div class="center">
      <my-header title="入库统计" showdatatext="标准值：13" />
      <div class="data">
        <div id="rukutongji_main"></div>
        <div>
          <div class="tableheard">
            <span>异常信息</span>
          </div>
          <hr />
          <div class="tabledata">
            <div>
              <div class="shijian">
                <span class="sp1">时间</span>
                <span class="shijiansp2">11:00</span>
                <span class="shijiansp3">13:00</span>
              </div>
              <hr />
              <div class="chanzhi">
                <span class="sp1">产值</span>
                <span class="chanzhisp2">12</span>
                <span class="chanzhisp3">11</span>
              </div>
              <hr />
              <div class="chazhi">
                <span class="sp1">差值</span>
                <span class="chazhisp2">11:00</span>
                <span class="chazhisp3">13:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
        <script>
  import * as echarts from "echarts";
  import myheader from "./myheader";
  
  export default {
    components: {
      "my-header": myheader,
    },
    name: "rukutongji",
    data() {
      return {
        showdata: true,
        showbtn: false,
      };
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let chartDom = document.getElementById("rukutongji_main");
        let myChart = echarts.init(chartDom, "dark");
        let option;
  
        let biaozhunzhi = 230;
        let maxIndex = biaozhunzhi;
        let minIndex = 205;
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "6%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: ["1", "2", "3", "4", "5", "6", "7"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "焊装上线",
              type: "bar",
              barWidth: "20%",
              markLine: {
                symbol: ["none", "none"], //去掉箭头
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "rgb(253, 187, 113) ", // 这儿设置安全基线颜色
                  },
                },
                data: [
                  {
                    name: "标准",
                    yAxis: biaozhunzhi,
                    label: {
                      position: "end",
                      formatter: "{b}",
                    },
                  },
                ],
                label: {
                  show: true,
                  position: "insideStartBottom",
                  color: "rgb(253, 187, 113)",
                },
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colors = [];
                    if (params.data > maxIndex) {
                      colors = ["#45d8b7", "#23705c"];
                    } else if (params.data < maxIndex && params.data > minIndex) {
                      colors = ["#0194ff", "#004a82"];
                    } else {
                      colors = ["#f2b304", "#8a6500"];
                    }
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: colors[0] },
                      { offset: 1, color: colors[1] },
                    ]);
                  },
                },
              },
              data: [10, 52, 200, 334, 390, 330, 220],
            },
          ],
        };
  
        option && myChart.setOption(option);
      },
    },
  };
  </script>
        <style  scoped>
  .center {
    width: 100%;
    height: 100%;
  }
  .data {
    width: 100%;
    background-color: rgb(6, 10, 51);
    border: 1px solid rgb(85, 125, 219);
  }
  #rukutongji_main {
    width: 100%;
    height: 22.75rem /* 300/16 */;
  }
  .data .tableheard {
    background-color: rgb(6, 10, 51);
    padding-top: 0.625rem /* 10/16 */;
    height: 1.875rem /* 30/16 */;
  }
  .data hr {
    border-image: linear-gradient(
        to right,
        rgb(85, 125, 219),
        rgba(6, 10, 51, 0.953)
      )
      1 10;
    margin: 0;
  }
  .data .tableheard span {
    font-size: 12px;
    color: rgb(102, 144, 255);
    font-weight: 700;
    padding-left: 1.25rem /* 20/16 */;
    height: 100%;
  }
  .data .tabledata hr {
    border-image: linear-gradient(
        to right,
        rgb(85, 125, 219),
        rgba(6, 10, 51, 0.953)
      )
      1 10;
    margin: 0;
  }
  .data .tabledata .shijian {
    height: 1.875rem /* 30/16 */;
    display: flex;
    align-items: center;
  }
  
  .data .tabledata .sp1 {
    font-size: 12px;
    color: rgb(102, 144, 255);
    font-weight: bold;
    padding-left: 10px;
  }
  .data .tabledata .shijiansp2 {
    font-size: 1rem /* 16/16 */;
    width: 5.625rem /* 90/16 */;
    text-align: center;
    height: 100%;
    margin-left: 0.625rem /* 10/16 */;
    line-height: 1.875rem /* 30/16 */;
    background: -webkit-linear-gradient(top, rgb(4, 8, 47), rgb(9, 19, 56),rgb(11, 25, 61));
  }
  .data .tabledata .shijiansp3 {
    font-size: 1rem /* 16/16 */;
    width: 5.625rem /* 90/16 */;
    text-align: center;
    height: 100%;
    line-height: 1.875rem /* 30/16 */;
    background: -webkit-linear-gradient(top, rgb(4, 8, 47), rgb(23, 21, 48),rgb(24, 22, 47));
  
  }

  
  .data .tabledata .chanzhi {
    height: 3.125rem /* 50/16 */;
    display: flex;
    align-items: center;
  }
  .data .tabledata .chanzhisp2 {
    font-size: 20px;
    width: 5.625rem /* 90/16 */;
    height: 100%;
    text-align: center;
    margin-left: 0.625rem /* 10/16 */;
    line-height: 3.25rem /* 20/16 */;
    background: -webkit-linear-gradient(top, rgb(11, 25, 61), rgb(14, 38, 69),rgb(15, 45, 71));
  
  }
  .data .tabledata .chanzhisp3 {
    text-align: center;
    font-size: 20px;
    width: 5.625rem /* 90/16 */;
    height: 100%;
    text-align: center;
    margin-left: 1px;
    line-height: 3.25rem /* 20/16 */;
    background: -webkit-linear-gradient(top, rgb(24, 22, 47), rgb(50, 41, 42),rgb(50, 41, 42));
  }
 
  
  .data .tabledata .chazhi {
    height: 3.125rem /* 50/16 */;
    display: flex;
    align-items: center;
  }
  
  .data .tabledata .chazhisp2 {
    font-size: 23px;
    width: 5.625rem /* 90/16 */;
    text-align: center;
    margin-left: 0.625rem /* 10/16 */;
    height: 100%;
    line-height: 3.25rem /* 20/16 */;
    background: -webkit-linear-gradient(top, rgb(15, 45, 71), rgb(21, 61, 83),rgb(23, 69, 88));
  }
  
  .data .tabledata .chazhisp3 {
    font-size: 23px;
    width: 5.625rem /* 90/16 */;
    text-align: center;
    height: 100%;
    margin-left: 1px;
    line-height: 3.25rem /* 20/16 */;
    background: -webkit-linear-gradient(top, rgb(50, 41, 42), rgb(67, 53, 38),rgb(76, 59, 33));
  }
  

  </style>
        